import React, { Fragment } from 'react'
import { StyleSheet, View, Text, FlatList } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT, ONE_PIXEL, WIDTH } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import JobIntentionCardNew from 'src/components/card-job-intention-new'
import EducationInfoCardNew from 'src/components/card-education-info-new'
import WorkExperienceCardNew from 'src/components/card-work-experience-new'

export default class ResumeComponent extends React.Component {
  static propTypes = {
    jobHuntingModels: PropTypes.array,
    userArchiveWorkModels: PropTypes.array,
    educations: PropTypes.array,
    intro: PropTypes.string,
    dataPhotoArr: PropTypes.array,
    jumpIntentionPage: PropTypes.func,
    jumpSelfEvaluationPage: PropTypes.func,
    jumpEducationPage: PropTypes.func,
    jumpWorkExperience: PropTypes.func,
    jumpMyPhoneAlbums: PropTypes.func,
    keyExtractor: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
      data: []
    }
  }

  render () {
    const {
      jobHuntingModels, userArchiveWorkModels, educations, intro, dataPhotoArr,
      jumpIntentionPage, jumpSelfEvaluationPage, jumpEducationPage, jumpWorkExperience, jumpMyPhoneAlbums, keyExtractor
    } = this.props
    return (
      <Fragment>
        <View style={[styles.jobIntentionView, { marginTop: ScaleS(40) }]}>
          <View style={styles.rightIcon}>
            <CustomImage
              style={styles.rightIconText}
              source={require('@/imgC/userinfo/icon_i.png')}
            />
          </View>
          <View style={[styles.jobIntentionTitleView, (!jobHuntingModels || jobHuntingModels.length <= 0) && styles.blankStyle]}>
            <CustomButton style={styles.jobHuntingTop} onPress={jumpIntentionPage}>
              <Text style={styles.jobIntentionTitleLabel}>求职意向</Text>
              <View style={styles.titleDotView}>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
              </View>
            </CustomButton>
            {
              !!jobHuntingModels && jobHuntingModels.length > 0 && jobHuntingModels.map((item, index) => {
                return (<JobIntentionCardNew
                  key={item.id}
                  style={{ marginTop: ScaleS(index === 0 ? 0 : 35) }}
                  dataSource={item} />)
              })
            }
          </View>
        </View>
        {
          (!jobHuntingModels || jobHuntingModels.length <= 0) && (
            <View style={styles.blankView}>
              <CustomImage style={styles.itemBlankImg} source={require('@/imgC/userinfo/blank_1.jpg')} />
            </View>
          )
        }

        <View style={styles.jobIntentionView}>
          <View style={styles.rightIcon}>
            <CustomImage
              style={styles.rightIconText}
              source={require('@/imgC/userinfo/icon_a.png')}
            />
          </View>
          <CustomButton style={[styles.jobIntentionTitleView, !intro && styles.blankStyle]} onPress={jumpSelfEvaluationPage}>
            <View style={[styles.jobHuntingTop, styles.selfAssessmentTitleTop]}>
              <Text style={styles.jobIntentionTitleLabel}>自我评价</Text>
              <View style={styles.titleDotView}>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
              </View>
            </View>
            {!!intro && <Text style={styles.selfAssessmentContent}>{intro}</Text>}
          </CustomButton>
        </View>
        {!intro &&
          <View style={styles.blankView}>
            <CustomImage style={styles.itemBlankImg} source={require('@/imgC/userinfo/blank_2.jpg')} />
          </View>}

        <View style={styles.jobIntentionView}>
          <View style={styles.rightIcon}>
            <CustomImage
              style={styles.rightIconText}
              source={require('@/imgC/userinfo/icon_e.png')}
            />
          </View>
          <View style={[styles.jobIntentionTitleView, (!educations || educations.length <= 0) && styles.blankStyle]}>
            <CustomButton style={styles.jobHuntingTop} onPress={jumpEducationPage}>
              <Text style={styles.jobIntentionTitleLabel}>教育信息</Text>
              <View style={styles.titleDotView}>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
              </View>
            </CustomButton>
            {
              !!educations && educations.length > 0 && educations.map((item, index) => {
                return (<EducationInfoCardNew
                  key={item.id}
                  style={{ marginTop: ScaleS(index === 0 ? 0 : 30) }}
                  dataSource={item} />)
              })
            }
          </View>
        </View>
        {
          (!educations || educations.length <= 0) && (
            <View style={styles.blankView}>
              <CustomImage style={styles.itemBlankImg} source={require('@/imgC/userinfo/blank_3.jpg')} />
            </View>
          )
        }

        <View style={styles.jobIntentionView}>
          <View style={styles.rightIcon}>
            <CustomImage
              style={styles.rightIconText}
              source={require('@/imgC/userinfo/icon_w.png')}
            />
          </View>
          <View style={[styles.jobIntentionTitleView, (!userArchiveWorkModels || userArchiveWorkModels.length <= 0) && styles.blankStyle]}>
            <CustomButton style={styles.jobHuntingTop} onPress={jumpWorkExperience}>
              <Text style={styles.jobIntentionTitleLabel}>工作经验</Text>
              <View style={styles.titleDotView}>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
              </View>
            </CustomButton>
            {
              !!userArchiveWorkModels && userArchiveWorkModels.length > 0 && userArchiveWorkModels.map((item, index) => {
                return (<WorkExperienceCardNew
                  key={item.id}
                  style={{ marginTop: ScaleS(index === 0 ? 0 : 30) }}
                  dataSource={item} />)
              })
            }
          </View>
        </View>
        {
          (!userArchiveWorkModels || userArchiveWorkModels.length <= 0) && (
            <View style={styles.blankView}>
              <CustomImage style={styles.itemBlankImg} source={require('@/imgC/userinfo/blank_5.jpg')} />
            </View>
          )
        }

        <View style={styles.jobIntentionView}>
          <View style={styles.rightIcon}>
            <CustomImage
              style={styles.rightIconText}
              source={require('@/imgC/userinfo/icon_p.png')}
            />
          </View>
          <View style={[styles.photoView, (!dataPhotoArr || dataPhotoArr.length <= 0) && styles.blankStyle]}>
            <CustomButton style={styles.jobHuntingTop} onPress={jumpMyPhoneAlbums}>
              <Text style={styles.jobIntentionTitleLabel}>我的相册</Text>
              <View style={styles.titleDotView}>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
                <View style={styles.titleDot}></View>
              </View>
            </CustomButton>
            {!!dataPhotoArr && dataPhotoArr.length > 0 && <FlatList
              style={styles.photoAlbumScrollView}
              data={dataPhotoArr}
              horizontal={false}
              numColumns={3}
              renderItem={this._renderItem}
              keyExtractor={keyExtractor} />}
          </View>
        </View>
        {
          (!dataPhotoArr || dataPhotoArr.length <= 0) && (
            <View style={styles.blankView}>
              <CustomImage style={styles.itemBlankImg} source={require('@/imgC/userinfo/blank_4.jpg')} />
            </View>
          )
        }
      </Fragment>
    )
  }

  componentDidMount () {
  }

  _renderItem = ({ item, index }) => {
    return (
      <CustomButton
        style={[styles.itemView, { marginRight: index % 3 === 2 ? 0 : ScaleS(4) }]}
        params={{ item, index }}
        onPress={this._imgItemClick}
      >
        <CustomImage
          style={styles.photoImg}
          source={{ uri: item.url }} />
      </CustomButton>
    )
  }
}

const styles = StyleSheet.create({
  selfAssessmentContent: {
    color: '#818181',
    fontSize: ScaleT(14),
    fontWeight: '300',
    lineHeight: ScaleT(28)
  },
  jobIntentionView: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginHorizontal: ScaleS(20),
    marginTop: ScaleS(30)
  },
  jobIntentionTitleView: {
    flex: 1,
    flexDirection: 'column',
    paddingBottom: ScaleS(28),
    borderBottomColor: 'rgba(151, 151, 151, 0.25)',
    borderBottomWidth: ONE_PIXEL,
    borderStyle: 'solid'
  },
  photoView: {
    flex: 1,
    flexDirection: 'column',
    paddingBottom: ScaleS(30)
  },
  jobHuntingTop: {
    width: '100%',
    height: ScaleS(22),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: ScaleS(22)
  },
  selfAssessmentTitleTop: {
    marginBottom: ScaleS(14)
  },
  jobIntentionTitleLabel: {
    color: '#3C3C3C',
    fontSize: ScaleT(16),
    fontWeight: '500'
  },
  titleDotView: {
    flex: 1,
    justifyContent: 'flex-end',
    flexDirection: 'row',
    alignItems: 'center'
  },
  titleDot: {
    width: ScaleS(4),
    height: ScaleS(4),
    borderRadius: ScaleS(2),
    backgroundColor: '#666666',
    marginRight: ScaleS(4)
  },
  selfTitleLabel: {
    color: '#3C3C3C',
    fontSize: ScaleT(16),
    fontWeight: '500',
    flex: 1,
    marginBottom: ScaleS(18),
    marginTop: ScaleS(3)
  },
  photoAlbumScrollView: {
    flex: 1
  },
  itemView: {
    width: ScaleS(98),
    height: ScaleS(98),
    marginBottom: ScaleS(4)
  },
  photoImg: {
    width: ScaleS(98),
    height: ScaleS(98),
    resizeMode: 'cover'
  },
  rightIcon: {
    width: ScaleS(22),
    height: ScaleS(22),
    marginRight: ScaleS(10)
  },
  rightIconText: {
  },
  titleInfoItem: {
    flex: 1
  },
  myResumeView: {
    marginTop: ScaleS(35),
    paddingHorizontal: ScaleS(20)
  },
  myResumeContentView: {
    marginTop: ScaleS(40),
    paddingHorizontal: ScaleS(20)
  },
  myResumeContentItemVIew: {
    marginTop: ScaleS(36)
  },
  jobRecommendView: {
    marginTop: ScaleS(39)
  },
  completeMyResumeView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  completeMyResumeLabel: {
    fontSize: 12
  },
  resumeLine: {
    width: 1,
    backgroundColor: 'lightgrey',
    marginHorizontal: 5,
    height: '100%'
  },
  completeMyResume: {
    fontSize: 12,
    paddingHorizontal: 5,
    paddingVertical: 3,
    borderRadius: 3,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'lightgrey'
  },
  mineHorizontalLine: {
    height: 2,
    backgroundColor: 'white'
  },
  jobRecommendItemView: {
    borderRadius: ScaleS(10),
    width: ScaleS(177),
    marginRight: ScaleS(15)
  },
  serviceConsultationView: {
    marginVertical: ScaleS(40),
    marginHorizontal: ScaleS(20),
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  serviceConsultation: {
    color: '#444444',
    fontSize: ScaleT(19),
    fontWeight: '500'
  },
  servicePhone: {
    color: '#A5A5A5',
    fontSize: ScaleT(12),
    fontWeight: '400',
    marginTop: ScaleS(6)
  },
  mine: {
    marginTop: ScaleS(40),
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  mineLeft: {
    marginLeft: ScaleS(20),
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  mineButton: {
    marginRight: ScaleS(20),
    paddingTop: ScaleS(5),
    paddingBottom: ScaleS(5),
    paddingRight: ScaleS(13),
    paddingLeft: ScaleS(13),
    backgroundColor: 'rgba(255,249,233,1)',
    borderRadius: ScaleS(15)
  },
  mineButtontext: {
    fontWeight: '700',
    color: 'rgba(255,198,28,1)',
    fontSize: ScaleT(14)
  },
  mineLeftTitle: {
    fontSize: ScaleT(25),
    fontWeight: '500',
    color: '#000000'
  },
  mineLeftPerfectLimit: {
    fontWeight: '400',
    fontSize: ScaleT(14),
    color: 'rgba(153,153,153,1)'
  },
  PerfectLimit: {
    fontWeight: '400',
    fontSize: ScaleT(14),
    color: 'rgba(255, 194, 0, 1)'
  },
  PerfectLimitView: {
    marginLeft: ScaleS(6),
    flexDirection: 'row'
  },
  blankView: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    borderBottomColor: '#000',
    borderStyle: 'solid',
    borderBottomWidth: ScaleS(1),
    marginHorizontal: ScaleS(20),
    marginBottom: ScaleS(20)
  },
  itemBlankImg: {
  },
  blankStyle: {
    borderBottomWidth: 0,
    paddingBottom: ScaleS(20)
  }
})
